<template>
    <div>
        <el-row :gutter="20" class="firstRow">
            <el-col :span="5">
                <div>
                    <el-input v-model="payMessage"  placeholder="请输入开支名称"></el-input>
                </div>
            </el-col>
            <el-col class="second" :span="4">
                <div class="twoDiv">
                    <el-button type="primary" @click="pay()">查询餐厅开支</el-button>
                </div>
            </el-col>
            <el-col class="threeDiv" :span="4">
                <div>
                    <el-button type="primary"  @click='dialogVisible1=true' >添加餐厅开支</el-button>
                </div>
            </el-col>
            <el-dialog
                    center
                    title="提示"
                    :visible.sync="dialogVisible1"
                    width="30%"
                    :before-close="handleClose">
                <div class="wrapper" >
                    <div >
                        <span>购买人:</span>
                        <span style="margin-left: 5px"><el-input style="width: 150px;height: 20px" v-model="addName"></el-input></span>
                    </div>
                    <div>
                        <span style="margin-left: -22px">购买理由：</span>
                        <span><el-input style="width: 150px;height: 20px" v-model="addRs"></el-input></span>
                    </div>
                    <div>
                        <span style="margin-left: -18px">购买价格：</span>
                        <span><el-input style="width: 150px;height: 20px" v-model="addMoney"></el-input></span>
                    </div>
                    <div>
                        <span style="margin-left: -18px">购买时间：</span>
                        <span><el-input style="width: 150px;height: 20px" v-model="addDate"></el-input></span>
                    </div>
                </div><!--                添加餐厅开支-->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="addPay()">确 定</el-button>
                </span>
            </el-dialog>
        </el-row><!--        第二队按钮-->
        <el-row>
            <div>
                <el-table
                        @cell-click="getRowIndex"
                        :data="pageData"
                        :header-cell-style="this.$store.state.headerCssObj"
                        :cell-style="this.$store.state.cellCssObj"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="payPriceId"
                            label="id">
                    </el-table-column>
                    <el-table-column
                            prop="payBy"
                            label="购买者"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="payReason"
                            label="购买理由">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="购买价格">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="日期">
                    </el-table-column>
                    <el-table-column
                            prop="operate"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" style="background-color: #409EFF;color: white" @click="reviseSup(scope.row,scope.$index)">修改</el-button>
                            <el-button size="mini" style="background-color: #F56C6C;color: white"  @click="dialogVisible3 = true">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog
                    center
                    title="提示"
                    :visible.sync="dialogVisible3"
                    width="30%"
                    :before-close="handleClose">
                <span>确定删除这条信息？</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible3 = false">取 消</el-button>
                    <el-button type="primary" @click="del()">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog
                    center
                    title="提示"
                    :visible.sync="dialogVisible2"
                    width="30%"
                    :before-close="handleClose">
                <div class="wrapper" >

                    <div>
                        <span>id:</span>
                        <span>{{id}}</span>
                    </div>
                    <div>
                        <span>购买者：</span>
                        <span><el-input style="width: 150px;height: 20px" v-model="buyer"></el-input></span>
                    </div>
                    <div>
                        <span>购买理由：</span>
                        <span><el-input style="width: 150px;height: 20px" v-model="addRs"></el-input></span>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click=" update()">确 定</el-button>
                </span>
            </el-dialog><!--            修改-->
        </el-row><!--        第二个表格-->
        <el-row>
            <div class="pages">
                <paging :obj = 'pagingData'></paging>
            </div>
        </el-row><!--     第二个分页-->
    </div>

</template>

<script>
    import diySelect from "../../components/publicCom/diySelect";
    import paging from "../../components/publicCom/paging";
    import * as  url from '../../http/api'
    export default {
        name: "SecondTable",
        components:{
            paging,
            diySelect
        },
        data() {
            return {
                currentData:[

                ],
                dialogVisible1: false,
                dialogVisible2:false,
                dialogVisible3:false,
                inputMessage: '',
                SupMessage:'',
                payMessage:'',
                input:'',
                buyer:'',
                price:'',
                date:'',
                addRs:'',
                supName:'',
                addName:'',
                addMoney:'',
                addDate:'',
                addSupName:'',
                currentPage:1,
                id:'',
                currentIndex:null,
                totalPage:'',
                pageNums:0

            }
        },
        mounted(){
            this.fenye1()
        },
        computed: {
            pagingData() {
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    pageCount: this.pageNums,//一共有几页
                    currentChange(num) {
                        // console.log(num)
                        that.currentPage = num//改变当前页
                        that.fenye1()

                    },
                };
                return data
            },
            pageData(){
                return this.currentData
            }

        },
        methods: {
            fenye1(){
                let obj = {
                    name:this.payMessage,
                    pageCount:5,//页容量
                    pageSize:this.currentPage,//当前页
                    type:1,
                };
                this.$axios({
                    url:url.financialManagementPage,
                    method: 'post',
                    data:obj
                }).then(resp=>{
                    this.currentData = resp.data.payPriceList
                    this.pageNums = resp.data.totalPage
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            pay(){
                if (this.payMessage === ''){
                    this.$message.success({message:'请输入值'})
                }else{
                    let val = this.payMessage;
                    let obj = {
                        name:val,
                        pageCount: 5,
                        pageSize: this.currentPage,
                        type:1
                    };
                    this.$axios({
                        url:url.financialManagementPage,
                        method:'post',
                        data:obj
                    }).then(resp=>{
                        if (resp.data.payPriceList.length>0){
                            this.currentData = resp.data.payPriceList
                            this.$message.success({message:'查询成功'})
                        }else{
                            this.$message.success({message:'查询失败'})
                        }


                    })
                }

            },//查询餐厅开支
            choose(val){
                this.selectValue = val;    //获取选项值
                console.log(val);
            },
            reviseSup(obj,index){
                this.dialogVisible2 = true;
                this.payPriceId = obj.payPriceId;
                this.payBy = obj.payBy;
                this.payReason = obj.payReason;
                this.price = obj.price;
                this.time  = obj.time;
                this.currentIndex = (parseInt(this.currentPage)-1)*5 + parseInt(index)
            },
            update(){
                this.dialogVisible2 = false
                let obj = {
                    // payBy: this.buyer,    //购买人
                    // payPriceId: this.id,      //支出表id//购买理由
                    // page: {
                    //     type: 1  //状态 0（供应商）或 1（开支）,
                    // },
                    page: {
                        type: 1   //状态 0（供应商）或 1（开支）,
                    },
                    payPriceEntity: {
                        payBy: this.buyer,    //购买人
                        payPriceId: this.id,      //支出表id
                        payReason: this.addRs, //购买理由
                    },

                };
                let data = {
                    payPriceId:this.id,
                    payBy: this.buyer,
                    payReason: this.addRs,
                    price:this.price,
                    time:this.time,


                }
                this.$axios({
                    url:url.financialManagementUpdate,
                    method:'post',
                    data:obj
                }).then(resp=>{
                    console.log(resp)
                    if(resp.data.Code === 200){
                        this.$message.success({message: '修改成功！！'})
                        this.currentData.splice(this.currentIndex,1,data)
                    }else if(resp.data.Code === 400){
                        this.$message.error('修改失败！!')
                    }
                }).catch(err=>{
                    console.log(err)
                }) //修改



            },//修改
            addPay(){
                this.dialogVisible1 = false
                let name = this.addName;
                let reason = this.addRs;
                let money =Number(this.addMoney) ;
                let date = this.addDate;
                let addName = this.addSupName;
                let obj ={
                    page:{
                      name:'好',
                      pageCount:5,
                      pageSize:1,
                      type:1,
                    },
                    payPriceEntity: {  //开支实体类
                        payBy: name, //购买人
                        payReason: reason,  //购买的理由
                        price: money,       //购买的价格
                        time: date , //购买时间
                    },
                };
                console.log(obj)
                console.log(typeof date)
                this.$axios({
                    url:url.financialManagementAdd,
                    method:'post',
                    data:obj
                }).then(resp=>{
                    console.log(resp)
                }).catch(err=>{
                    console.log(err)
                })

            },//增加餐厅开支
            del(){
               this.dialogVisible3 = false
                let obj = {
                    page:{
                        type:1,
                    },
                    payPriceEntity: {
                        payPriceId: this.id,  //支出表的id
                    }, //支出表的id

                };
                this.$axios({
                    url:url.financialManagementDelete,
                    method:'post',
                    data:obj
                }).then(resp=>{
                    if(resp.data.Code === 200){
                        this.$message.success({message: '删除成功！'})
                        this.currentData.splice(this.currentIndex,1)
                    }else if(resp.data.Code === 400){
                        this.$message.error('删除失败！!')
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },

            getRowIndex(row,column,cell,event){
                this.id = row.payPriceId
            },
        }
    }
</script>

<style scoped lang="less">
    .el-row {
    .twoDiv{
        padding-left: -30px;
    }
    /*border: 1px solid #c0ccda;*/
    padding-top: 10px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
    }
    .row-bg {
        background-color: #f9fafc;
    }
    .firstRow{
        /*border: 1px solid red;*/
        padding: 20px 0;
    .el-button{
        height: 40px;
        width: 130px;
        text-align: center;
    }
    }

    .pages{
        text-align: center;
        padding: 10px 0;
    }
    .wrapper{
        text-align: center;
    div{
        height: 50px;
    }
    span{
    }
    }
</style>